import React from 'react';
import { Cascader } from 'antd';
import { Table } from 'antd';

class List extends React.Component{
    constructor(props){
        super(props);
    }

    
    render(){
        const options = [{
            value: '全部',
            label: '全部',
        },{
            value: '2016',
            label: '2016',
        }, {
            value: '2017',
            label: '2017',
  
        }];
        const optionss = [{
            value: '全部',
            label: '全部',
        }];
        const renderContent = (value, row, index) => {
  const obj = {
    children: value,
    props: {},
  };
  return obj;
};

const columns = [{
  title: '排名',
  dataIndex: 'name',
}, {
  title: '昵称',
  dataIndex: 'age',
  render: renderContent,
}, 
 {
  title: '团队',
  dataIndex: 'address',
  render: renderContent,
},
 {
  title: '贡献值',
  dataIndex: 'zhi',
  render: renderContent,
}
];

const data = [{
  key: '1',
  name: '1',
  age: "xxx",
  address: '第七字母',
  zhi:"1290",
}, {
  key: '2',
  name: '2',
  age: "呵呵呵",
  address: '网络攻防小组',
  zhi:"1340",
}, {
  key: '3',
  name: '3',
  age: "呵呵呵",
  address: '网络攻防小组',
  zhi:"1340",
}, {
  key: '4',
  name: '4',
  age: "呵呵呵",
  address: '网络攻防小组',
  zhi:"1340",
}, {
  key: '5',
  name: '5',
  age: "呵呵呵",
  address: '网络攻防小组',
  zhi:"1340",
}, {
  key: '6',
  name: '6',
  age: "呵呵呵",
  address: '网络攻防小组',
  zhi:"1340",
}, {
  key: '7',
  name: '7',
  age: "呵呵呵",
  address: '网络攻防小组',
  zhi:"1340",
}, {
  key: '8',
  name: '8',
  age: "呵呵呵",
  address: '网络攻防小组',
  zhi:"1340",
}, {
  key: '9',
  name: '9',
  age: "呵呵呵",
  address: '网络攻防小组',
  zhi:"1340",
}, {
  key: '10',
  name: '10',
  age: "呵呵呵",
  address: '网络攻防小组',
  zhi:"1340",
},{
  key: '11',
  name: '11',
  age: "xxx",
  address: '第七字母',
  zhi:"1290",
},{
  key: '12',
  name: '12',
  age: "xxx",
  address: '第七字母',
  zhi:"1290",
},{
  key: '13',
  name: '13',
  age: "xxx",
  address: '第七字母',
  zhi:"1290",
}];



function onChange(value) {
  console.log(value);
}
        return(
            <div>
                <div className="lists">
                    <div className="aside">
                        <span className="contribution-title">ESRC英雄榜及感谢名单</span>
                        <img src={require("./static/images/contribution.png")} className="notice"/>
                        <p className="contribution-content">
                            ESRC 成立以来 ，有 
                            <span>73</span>
                             位白帽子通过 ESRC 平台上报了
                             <span>588</span> 
                              个饿了么漏洞，ESRC 对这些白帽子的付出表示由衷的感谢！ 
                        </p>
                    </div>
                    <div className="main">
                      <div className="select">
                         年份&nbsp; <Cascader options={options} onChange={onChange} placeholder="全部" />
                        月份&nbsp; <Cascader options={optionss} onChange={onChange} placeholder="全部" />
                      </div>
                       
                        <Table columns={columns} dataSource={data} bordered/>
                    </div>
                </div>
                <div className="esrc-footer">
                    Copyright © 2015 
                    <a href="http://www.ele.me">Ele.me</a>
                    . All Rights Reserved 
                </div>

            </div>
        )
    }
}


export default List;